<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-15 15:08:50
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-04-28 14:14:32
 * @FilePath: \cxl-driving-training\src\views\classManagement\learnDrivingTypeList\edit\Index.vue
-->
<template>
    <div class="page-box-detail">
        <titleVue :title="data.operation.type === 'create' ? '新增' : '编辑'" big="true" />
        <formVue :data="data.formData" ref="formRef" :disabled="data.operation.type === 'look' ? true : false" />
        <!-- 取消 保存 -->
        <div class="operation">
            <el-button @click="data.onCancel"> {{ data.operation.type === 'look' ? '返回' : '取消' }}</el-button>
            <el-button type="primary" @click="data.onSave(formRef)" v-if="data.operation.type !== 'look'"
                >保存</el-button
            >
        </div>
    </div>
</template>
<script setup lang="ts">
import formVue from '@/components/form/Index.vue'
import titleVue from '@/components/title/Index.vue'
import LearnDrivingTypeOpreation from './index'
import { reactive, ref } from 'vue'
const formRef = ref()
const data = reactive(new LearnDrivingTypeOpreation())
</script>

<style scoped lang="scss">
.operation {
    display: flex;
    justify-content: center;
    margin: 50px 0 100px 0;
    > button {
        margin: 0 30px;
    }
}
</style>
